import React, { useState } from 'react';
import { Table, Button, Tag, Drawer, Form, Input } from 'antd';
import type { TableProps } from 'antd';
import styles from '@/views/styles/page3.module.scss'
import { PlusOutlined } from '@ant-design/icons';

interface DataType {
    key: string;
    peopleNumber: string;
    teamName: string;
    author: string;
    phoneNumber: string,
    pushTime: string;
    status: string,
    tags: string
}



const data: DataType[] = [
    {
        key: '1',
        peopleNumber: 'John Brown',
        teamName: '32',
        author: 'New York No. 1 Lake Park',
        phoneNumber: 'sadasfasfew',
        pushTime: 'sdsad',
        status: 'true',
        tags: 'jianloi'
    },
    {
        key: '2',
        peopleNumber: 'John Brown',
        teamName: '32',
        author: 'New York No. 1 Lake Park',
        phoneNumber: 'sadasfasfew',
        pushTime: 'sdsad',
        status: 'false',
        tags: 'jianloi'
    },
    {
        key: '3',
        peopleNumber: 'John Brown',
        teamName: '32',
        author: 'New York No. 1 Lake Park',
        phoneNumber: 'sadasfasfew',
        pushTime: 'sdsad',
        status: 'true',
        tags: 'jianloi'
    },
];

const View: React.FC = () => {

    const editRow = (row: object): void => {
        console.log(row)
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '工号',
            dataIndex: 'peopleNumber',
            key: 'peopleNumber',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '部门名称',
            dataIndex: 'teamName',
            key: 'teamName',
        },
        {
            title: '负责人',
            dataIndex: 'author',
            key: 'author',
        },
        {
            title: '发布时间',
            dataIndex: 'pushTime',
            key: 'pushTime',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (_, record) => {
                return (
                    <>
                        {record.status === 'true'
                            ? <Tag color="#f50">禁用</Tag>
                            : <Tag color="#87d068">启用</Tag>
                        }
                    </>
                )
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Button onClick={() => editRow(record)}>编辑</Button>
            ),
        },
        {
            title: '简历',
            key: 'tags',
            dataIndex: 'tags',
        },
    ];

    const [open, setOpen] = useState(false);

    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };

    const onFinish = (values: any) => {
        console.log('Success:', values);
    };

    return (
        <>
            <div style={{ padding: '20px' }} className={styles.header}>
                <h2 style={{ fontSize: '20px', fontWeight: "bold" }}>部门管理</h2>
                <div style={{ marginLeft: '20px' }}>
                    <Button type="primary" icon={<PlusOutlined />} onClick={() => showDrawer()}>新增</Button>
                </div>
            </div>
            <Table<DataType> columns={columns} dataSource={data} />
            <Drawer width="500" title="Basic Drawer" onClose={onClose} open={open}>
                <h2 style={{ fontSize: '18px', fontWeight: 'bold' }}>新增部门</h2>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="工号"
                        name="peopleNumber"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="部门名称"
                        name="teamName"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="电话号码"
                        name="phoneNumber"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="负责人"
                        name="author"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </>
    )
};

export default View;